<template>
  <div class="resident-box">
    <!-- 标题 -->
    <mu-base-title title="居民管理" />

    <!-- 搜索表单 -->
    <el-form :model="formData" inline>
      <el-form-item label="签约状态">
        <el-select v-model="formData.state" size="default" clearable placeholder="请选择">
          <el-option :label="item.label" :value="item.value" v-for="item in statesData" :key="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item style="width: auto;">
        <el-button type="primary" @click="$router.push('/resident/add')">新增居民档案</el-button>
      </el-form-item>
      <el-form-item style="width: auto;">
        <el-button type="primary" @click="searchResidents">搜索</el-button>
      </el-form-item>
      <!-- 切换icon -->
      <el-form-item class="icon-box">
        <img v-show="isTable" src="../../assets/u3950_mouseOver.png">
        <img v-show="isTable" src="../../assets/u3951.png" @click="isTable = false">
        <img v-show="!isTable" src="../../assets/u3950.png" @click="isTable = true">
        <img v-show="!isTable" src="../../assets/u3951_mouseOver.png">
      </el-form-item>
    </el-form>

    <!-- 表格 -->
    <mu-base-table v-if="isTable" :columnData="columnData" :tableData="residentsData">
      <template #avatar="{ row }">
        <img :src="row.avatar" width="46" height="46" style="border-radius: 50%;">
      </template>
      <template #state="{ row }">
        <span :style="{ color: statesData[row.state].color }" style="font-weight: 600;">
          {{ statesData[row.state].label }}
        </span>
      </template>
      <template #handle="{ row }">
        <!-- <router-link :to="`/sign/detail/${JSON.stringify({ _id: row._id, btnName: '编辑签约信息' })}`">
          <el-button link class="table-btn">查看详情</el-button>
        </router-link> -->
        <!-- <router-link :to="`/sign/update/${row._id}`">
          <el-button link class="table-btn" style="color: var(--el-color-primary);">编辑</el-button>
        </router-link> -->
        <!-- <router-link :to="`/sign/update/${row._id}`">
          <el-button link class="table-btn" style="color: var(--el-color-primary);">添加服务</el-button>
        </router-link> -->
        <el-button link class="table-btn" style="color: #FA7674;" @click="onDelete(row._id)">删除</el-button>
      </template>
    </mu-base-table>

    <!-- 卡片 -->
    <div v-else class="card-container">
      <div class="item" v-for="item in residentsData" :key="item._id">
        <img class="avatar" :src="item.avatar" alt="头像">
        <p class="name-box">
          <span class="name ellipsis">{{ item.name ?? '未知' }}</span>
          <span class="age">
            {{
              new Date().getFullYear() - new Date(item.birthday).getFullYear()
                ?
                new Date().getFullYear() - new Date(item.birthday).getFullYear() + '岁'
                :
                '保密'
            }}
          </span>
          <img v-if="item.gender == 0" class="gender-icon" src="../../assets/嘻哈男孩.png" alt="">
          <img v-else-if="item.gender == 1" class="gender-icon" src="../../assets/女孩.png" alt="">
          <span v-else class="age" style="margin-left: 0px;">保密</span>
        </p>
        <p class="state" :style="{ backgroundColor: statesData[item.state]?.color }">
          {{ statesData[item.state]?.label }}
        </p>
      </div>
    </div>

    <!-- 分页： -->
    <div v-if="pageData" class="page-box">
      <el-pagination v-model:current-page="pageData.currentPage" v-model:page-size="pageData.pageSize"
        :page-sizes="[14, 20, 21, 28]" background layout="total, sizes, prev, pager, next, jumper" :total="total" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { deleteResidentApi, searchResidentsApi } from '@/api/resident';
import { useFindData } from '@/composables/findData';
import { onMounted, ref, watch } from 'vue';

const { open } = useFindData();

// 当前显示是表格还是卡片
const isTable = ref(true);

// 居民 签约状态 数据
const statesData = [
  { label: '待签约', value: 0, color: '#6C76F4' },
  { label: '签约中', value: 1, color: '#3DD4A7' },
  { label: '签约生效中', value: 2, color: '#FBE178' },
  { label: '待续约', value: 3, color: '#FA7674' }
];

// 搜索表单v-model 数据
const formData: any = ref({});

// 表格列数据
const columnData = ref<columnDataType[]>([
  { label: '', prop: '', width: 55, settings: { type: 'selection' } },
  { label: '编号', prop: '_id', align: 'center', settings: { 'min-width': 120 } },
  { label: '头像', prop: 'avatar', align: 'center', width: 100 },
  { label: '姓名', prop: 'name', align: 'center' },
  { label: '身份证号', prop: 'IDnumber', align: 'center' },
  { label: '手机号码', prop: 'phone', align: 'center' },
  { label: '签约状态', prop: 'state', align: 'center' },
  { label: '操作', prop: 'handle', align: 'center' },
]);

// 居民 数据
const residentsData: any = ref([]);

// 居民 总数量
const total = ref(0);
// 分页数据
const pageData = ref({
  currentPage: 1,
  pageSize: 14,
});



// 侦听：实现分页
watch(pageData, () => {
  searchResidents();
}, { deep: true });



onMounted(() => {
  searchResidents();
})



// 事件：删除 按钮 点击
const onDelete = async (_id: string) => {
  const isConfirm = await open('居民信息删除后无法恢复，确定要删除吗？');
  if (isConfirm) {
    // 发请求
    deleteResident(_id);
  }
}

// 请求：删除居民
const deleteResident = async (_id: string) => {
  const res = await deleteResidentApi({
    _id
  });
  // console.log(res);
  if (res.code == 200) {
    ElMessage.success('删除成功');
    searchResidents();
  }
}

// 请求：获取 用户 数据
const searchResidents = async () => {
  const res = await searchResidentsApi({
    ...pageData.value,
    ...formData.value
  });
  console.log(res);
  if (res.code == 200) {
    residentsData.value = res.data.rows;
    total.value = res.data.total;
  }
}

</script>

<style scoped lang="scss">
.resident-box {

  .icon-box {
    // border: 1px solid purple;
    margin-bottom: 40px;

    img {
      width: 20px;
      height: 20px;

      margin-right: 20px;

      cursor: pointer;
    }
  }

  .table-btn {
    color: var(--el-color-primary);
    font-weight: normal;
  }

  .el-form {
    margin: 40px 0;

    .el-form-item {
      width: 250px;
      margin-bottom: 0;
    }
  }

  .card-container {
    display: grid;
    grid-template-columns: repeat(7, 200px);
    justify-content: space-between;

    .item:hover {
      background-color: #f2f7fb;
    }

    .item {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;

      width: 200px;
      height: 200px;

      margin-bottom: 40px;
      padding: 20px 0;

      border: 1px solid #eee;
      border-radius: 10px;

      box-shadow: 0 0 16px #eee;

      cursor: pointer;

      .avatar {
        width: 70px;
        height: 70px;

        border-radius: 50%;

        box-shadow: 0 0 10px #ddd;
      }

      .name-box {
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .name {
        max-width: 110px;

        text-align: center;
        font-size: 20px;
        color: #333;
      }

      .age {
        color: #ccc;
        font-size: 12px;

        margin: 0 12px 0 10px;
      }

      .gender-icon {
        width: 20px;
        height: 20px;
      }

      .state {
        height: 25px;

        line-height: 25px;
        color: #fff;
        font-size: 12px;

        border-radius: 20px;

        background-color: purple;

        padding: 0 16px;
      }
    }
  }

  .page-box {
    display: flex;
    justify-content: end;
    align-items: center;

    margin-top: 40px;
  }
}
</style>